<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- <span>{{ todos }}</span> -->
      <TodoHeader :addTodo="addTodo"></TodoHeader>
      <!-- 通过props传递数据 -->
      <TodoMain
        :todos="todos"
        :updateDone="updateDone"
        :deleteTodo="deleteTodo"
      ></TodoMain>
      <TodoFooter :todos="todos" :todoIsDone="todoIsDone" :updateAllDone="updateAllDone" :deleteDoneTodo="deleteDoneTodo"></TodoFooter>
    </div>
  </div>
</template>

<script>
// 引入子组件
import TodoHeader from "@/components/TodoHeader";
import TodoMain from "@/components/TodoMain";
import TodoFooter from "@/components/TodoFooter";

export default {
  name: "App",
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // 整个案例的数据
      // 响应式数据对象、数组[基本类型数据:变更、替换完成]
      // todos: [
      //   { id: 1, title: "喜洋洋", done: false },
      //   { id: 2, title: "美洋洋", done: false },
      //   { id: 3, title: "懒洋洋", done: false },
      //   { id: 4, title: "沸洋洋", done: false },
      // ],
       //在读取的时候：需要把字符串转换为引用类型的数据
      //底下这行代码:本地存储有数据用本地存储的,本地存储没有数据【null】，至少是一个空数组！！！！
      todos:JSON.parse(localStorage.getItem('ToDo')) || []
    };
  },
  methods: {
    // 父组件的方法：修改自身数据的done状态
    //第一个参数:子组件调用父亲的方法传递事件的ID
    //第二个参数:复选框的勾选状态【true|false】
    updateDone(id, done) {
      // 第一种方法
      // for (var i = 0; i < this.todos.length; i++) {
      //   if (this.todos[i].id == id) {
      //     this.todos[i].done = done;
      //   }
      // }

      // 第二种方法
      // this.todos.forEach((todo) => {
      //   if (todo.id == id) {
      //     todo.done = done;
      //   }
      // });

      // 第三种方法 数组map替换：Vue框架也能检测到变化。达到数据变化，视图跟着变化
      // this.todos = this.todos.map((item) => {
      //   if (item.id == id) {
      //     return { ...item, done };
      //   }
      //   return item;
      // });

      this.todos = this.todos.map((item) =>
        item.id == id ? { ...item, done } : item
      );
    },

    // 父组件App的方法 用于删除某个文件
    deleteTodo(id) {
      //Vue检测数组的变化:变更 shift|unshift|push|pop|splice|sort|reverse
      //替换:利用新的数组替换为起始的数组
      //下面这行代码:利用新的数组替换起始的数组  箭头函数简写方式：把函数体与关键字return同时省略
      this.todos = this.todos.filter((item) => (item.id == id ? false : true));
    },

    // 父组件App的方法  用于向数组里面添加新的元素
    addTodo(todo) {
      //向父组件数组里面添加新的事件之前需要判断：判断这个事件有没有，如果有了，没必要新增，如果没有在新增。
      let repeat = this.todos.find((item) => item.title == todo.title);

      // console.log(repeat);
      !repeat && this.todos.push(todo);
    },


    // 全部事件的勾选状态的修改
    updateAllDone(done){
      this.todos = this.todos.map(item=> ({...item,done:done}))
    },


    // 删除已经完成的事件
    deleteDoneTodo(){
      // 需要把已完成的事件进行过滤
      this.todos = this.todos.filter(item=> !item.done)
    },


  },
  // 计算属性
  computed: {
    todoIsDone() {
      //注意一件事情：filter方法返回一个数组
      //todoIsDone计算出来属性的属性值是一个数组【数组里面装载已经完成的事件】

      return this.todos.filter((item) => item.done);

    },
  },
  // 监听数据
  watch:{
      //监听属性todos,数组！！！对于监听的是数组：替换、变更。监听都可以检测到！！！
    todos(){
      localStorage.setItem('ToDo',JSON.stringify(this.todos))
    }
  }
};
</script>

<style>
</style>
